#recent-posts {
  width: $recent-posts-width;
  margin: auto;
  padding: 2rem;
}
.recent-post-item {
  color: $post-sub-text;
  margin-bottom: 2rem;
}
.post-title {
  display: block;
  margin-bottom: 1rem;
  a{
    @include compatible(transition,color 0.2s ease-in-out);
    font-size: 2rem;
    color: $post-title;
    &:hover {
      color: $post-title-hover;
    }
  }
}
.post-time {
  margin-bottom: 0.3rem;
  i {
    margin-right: 0.2rem;
  }
  time {
    margin-right: 0.5rem;
  }
}
.recent-post-content {
  margin-bottom: 1rem;
}
.read-more {
  margin: 2rem 0;
  width: 100%;
  text-align: center;
}
.more {
  padding: 0.4rem;
  color: white;
  background-color: $sub-color;
  border: 2px solid $sub-color;
  &:hover {
    background-color: transparent;
    border: 2px solid $main-color;
  }
}
.recent-post-abstract {
  font-size: 1.2rem;
  @include position($position: relative);
  @include compatible(transition,all .2s ease-in-out);
  &:hover {
    padding: 0 0.5rem;
    background-color: $post-sub-text;
    >p {
      color: white;
    }
  }  
}
.recent-post-tags {
  padding-top: 1rem;
  text-align: end;
  text-align: right;
}